<template>
  <div>
    <el-table border :stripe="true" fit element-loading-text="拼命加载中" highlight-current-row
              v-loading.body="tableLoadingFlag"
              :data="data" v-on="$listeners"
              :max-height="maxHeight">
      <el-table-column
        v-if="multipleSelection"
        type="selection"
        width="50">
      </el-table-column>
      <template v-for="column in columns">
        <el-table-column v-if="column.tag !== true"
          :render-header="column.renderHeader"
          :width="column.width"
          :align="column.align"
          :label="column.label"
          :prop="column.name"
          :formatter="column.formatter"
          :show-overflow-tooltip=true
          trigger="hover"
          placement="top"
        >
        </el-table-column>
        <!--工厂反机修复结果列-->
        <el-table-column v-if="column.tag === true"
          prop="repairResult"
          label="修复结果"
          width="100"
          align="center"
          :render-header="column.renderHeader">
          <template scope="scope">
            <el-tag type="warning" v-if="scope.row.repairResult === '原物返还'">
              {{scope.row.repairResult}}
            </el-tag>
            <el-tag type="success" v-if="scope.row.repairResult === '已修复'">
              {{scope.row.repairResult}}
            </el-tag>
            <el-tag type="danger" v-if="scope.row.repairResult === '已报废'">
              {{scope.row.repairResult}}
            </el-tag>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        :width="operationColumn.width"
        v-if="operationColumn">
        <template slot-scope="scope">
          <template v-for="operation in operationColumn.operations">
            <!--其他-->
            <el-button size="small" type="text" v-if="operation.page === undefined"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--账号启用禁用-->
            <el-button size="small" type="text" v-if="operation.page == 'enable'"
                       :disabled="(scope.row.accountStatus == '启用' && operation.name == '启用') || (scope.row.accountStatus == '禁用' && operation.name == '禁用')"
                       @click="operation.callback(scope.row)">
              {{operation.name}}
            </el-button>
            <!--备机收机-->
            <el-button size="small" type="text" v-if="operation.page == 'received'"
                       :disabled="(operation.name == '确认收机') && ((scope.row.receiverName
                         !== getReceiverName()) || (scope.row.receiveNum === scope.row.applyNum))"
                       @click="operation.callback(scope.row)">
              {{operation.name}}
            </el-button>
            <!--报废审批-->
            <el-button size="small" type="text" v-if="operation.page == 'scrap'"
                       :disabled="!scope.row.filePath"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--调拨发货-->
            <el-button size="small" type="text" v-if="operation.page == 'allocate'"
                       :disabled="scope.row.applicationStatus == '全部发放' && operation.name == '发货'"
                       @click="operation.callback(scope.row)">
              {{operation.name}}
            </el-button>
            <!--网点受理-->
            <el-button size="small" type="text" v-if="operation.page == 'accepts'"
                       :disabled="scope.row.status != 0"
                       @click="operation.callback(scope.row)">
              {{operation.name}}
            </el-button>
            <!-- 备机发放 -->
            <el-button size="small" type="text" v-if="operation.page == 'grants'"
                       :disabled="scope.row.applicationStatus == '全部发放'"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--工厂收机-->
            <el-button size="small" type="text" v-if="operation.page == 'factoryRec'"
                       :disabled="scope.row.isReceived == '0'"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--良品库编辑-->
            <el-button size="small" type="text" v-if="operation.page == 'goodStockEdit'"
                       :disabled="scope.row.isReturn == '客户机'"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--不良品库编辑-->
            <el-button size="small" type="text" v-if="operation.page == 'badStockEdit'"
                       :disabled="(scope.row.status != '0' && scope.row.status != '5')||(scope.row.isReturn == '客户机')"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--报废库编辑-->
            <el-button size="small" type="text" v-if="operation.page == 'scrapStockEdit'"
                       :disabled="scope.row.isReturn == '1'"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
            <!--特殊出库审核-->
            <el-button size="small" type="text" v-if="operation.page == 'specialOperationAudit'"
                       :disabled="scope.row.auditStatus != null"
                       @click="operation.callback(scope.row)">{{operation.name}}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      v-if="pagination"
      :current-page="currentPage"
      :page-size="pagination.pageSize"
      :page-sizes="pageSizes"
      :total="pagination.totalRecords"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

  </div>
</template>

<script>
  import {getName} from '@/utils/token'

  export default {
    name: 'CustomTable',
    props: {
      columns: {
        type: Array,
        require: true
      },
      // 限定表格高度(用于导入错误提示表格的横向滑动条的固定)
      maxHeight: {
        type: Number,
        require: false
      },
      data: {
        type: Array,
        require: true
      },
      tableLoadingFlag: {
        type: Boolean,
        default: false
      },
      multipleSelection: {
        type: Boolean,
        default: false
      },
      pagination: {
        type: Object,
        require: false
      },
      operationColumn: {
        type: Object,
        require: false
      },

      pageSizes: {
        type: Array,
        default () {
          return [2, 10, 20, 30, 50, 100, 120, 200, 1000]
        }
      }
    },
    data () {
      return {
        totalCount: 0,
        pageSize: null,
        currentPage: 1
      }
    },
    methods: {
      getReceiverName () {
        return getName()
      },
      handleSizeChange (val) {
        // 每页条数
        this.pagination.pageSize = val
        this.pagination.callback({
          pageNumber: this.pagination.currentPage,
          pageSize: val
        })
      },
      handleCurrentChange (val) {
        // 当前页
        this.pagination.currentPage = val
        this.pagination.callback({
          pageNumber: val,
          pageSize: this.pagination.pageSize
        })
      }
    }
  }
</script>

<style>
  .pagination {
    margin-top: 10px;
  }
</style>
